$(() => {

    // 购物车页面
    // 获取cookie中的用户名，判断是否登录
    var username = getCookie('username');
    if (!username) {
      sessionStorage.setItem('url', location.href);
      layer.msg('请先登录', { time: 1000 }, () => { location.href = './login.html' });
      return false;
    } else {
      // 获取到本地购物车的数据
      let cars = JSON.parse(localStorage.getItem('data'));
      // console.log(cars);
      // 判断本地购物车是否有数据
      if (!cars || !cars.length) {
        $('.cart>.content').html(`
        <div style="padding-left:10px;" class="jumbotron">
          <h1>购物车空空如也!</h1>
          <p>赶快去列表页挑选商品吧</p>
          <p><a class="btn btn-primary btn-lg" href="list.html" role="button">去列表页</a></p>
        </div>            
        `)
      } else {
        // 根据用户名获取到购物车中对应的商品id
        let ids1 = cars.map(v => {
          if (v.username === username) return v.id;
        });
        // 通过数组的过滤方法去除数组中的undefined
        let ids2 = ids1.filter(v => v !== undefined)
        if (ids2.length == 0) {  // 空数组说明该用户没有本地的购物车数据
          $('.cart>.content').html(`
            <div style="padding-left:10px;" class="jumbotron">
              <h1>购物车空空如也!</h1>
              <p>赶快去列表页挑选商品吧</p>
              <p><a class="btn btn-primary btn-lg" href="list.html" role="button">去列表页</a></p>
            </div>            
          `)
        } else {
          // 根据ids2数组中的商品id 组成一个 商品id的字符串
          let ids = ids2.join();
          // console.log(ids);
          // 根据这个id字符串请求接收
          async function fn() {
            // console.log("***");
            let res = await pAjax({
              url: '../js/cart.php',
              method:'get',
              data: { ids },
              dataType: 'json',
            })
            console.log(res);
            // 结构赋值获取数据
            let { data } = res;
            let strHtml = `
              <table class="table">
                <thead>
                    <tr>
                        <th><input type="checkbox" name="selectAll"></th>
                        <th>商品图片</th>
                        <th>商品名称</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>
                </thead>
              <tbody>`;
            // 遍历data，并渲染页面
            // console.log(ids2);
            data.forEach(v => {
              // 通过cars调用find方法找到id为 v.id并且v.username为username的
              let num = cars.find(t => t.username === username && t.id === v.id).n;
              // let initNum = num;
              strHtml += `
                <!-- 将库存和产品id存储到属性中 -->
                <tr valign="bottom" data-id='${v.id}' data-stock='${v.l}' data-init='${num}'>
                  <td><input type="checkbox" name="selectOne"></td>
                  <td><img src="../images/${v.id}.png" width="50" height="50"></td>
                  <td>${v.name}</td>
                  <td class="price">￥<span>${v.price}</span></td>                    
                  <td class="number">
                      <button class="btn btn-default reduce">-</button>
                      <input type="text" name="number" value="${num}" disabled>
                      <button class="btn btn-default add">+</button>
                  </td>
                  <td class="subtotal">￥<span>${num * v.price}</span></td>
                  <td><button class="btn btn-danger remove">移除</button></td>
              </tr>            
              `
            });
            strHtml += `
              </tbody>
                <tfoot>
                    <tr>
                        <td><input type="checkbox" name="selectAll"></td>
                        <td colspan="2">商品总数：<span class="totalNum">0</span></td>
                        <td colspan="2">商品总价：<span class="totalPrice">0</span></td>
                        <td><a class="btn btn-primary" href="../index.html">回首页</a></td>
                        <td><a class="btn btn-warning" href="order.html">去结算</a></td>
                    </tr>
                </tfoot>
              </table>`
            // 拼接完渲染字符串
            $('.cart>.content').html(strHtml)
            
            // 渲染之后调用
            slect()
            addAndReduce()
            numBlur()
            bindRemove()
          }
          fn();
        }
      }
    }
  
    // 定义一个获取商品总数和商品总价的函数
    function getNumATotal() {
      let num = 0;  // 总数
      let total = 0; // 总价
  
      $('input[name=selectOne]').each((i, v) => {
  
        if ($(v).prop('checked')) {  // 判断复选框是否被选中
          num += $(v).parent().parent().find('input[name=number]').val() - 0;
          total += $(v).parent().parent().find('.subtotal>span').text() - 0;
        }
      })
      $('.totalNum').html(num);
      $('.totalPrice').html(total);
    }
  
    // 封装点击复选框的事件
    function slect() {
      // 全选点击
      $('input[name=selectAll]').click(function () {
        $('input[name=selectAll]').prop('checked', $(this).prop('checked'));
        $('input[name=selectOne]').prop('checked', $(this).prop('checked'));
        // 统计总数和总价
        getNumATotal();
      })
      // 单个点击
      $('input[name=selectOne]').click(function () {
        // 将获取的jq集合转为数组
        let jqArr = [...$('input[name=selectOne]')];
        console.log(jqArr);
        let flag = jqArr.every(v => v.checked);
        $('input[name=selectAll]').prop('checked', flag);
        // 统计总数和总价
        getNumATotal();
      })
    }
    // 加和减的函数
    function addAndReduce() {
      $('.add').click(function () {
        // 将禁用的 - 解除
        $(this).prev().prev().prop('disabled', false);
        let num = $(this).prev().val() - 0;
        num++;
        // 判断num不能超过库存
        let stock = $(this).parent().parent()[0].dataset.stock;
        if (num > stock) {
          num = stock;
          layer.msg('超出库存');
          $(this).prop('disabled', true);
        }
        $(this).prev().val(num);
        
        // 改变本地购物车的数量
        // 获取商品id
        let id = $(this).parent().parent()[0].dataset.id;
        let data = JSON.parse(localStorage.getItem('data'));
        let car = data.find(v => v.username === username && v.id === id);
        car.n = num;
        // 将改变后的data数据写入本地购物车
        localStorage.setItem('data', JSON.stringify(data));
        // 修改小结
        let total = num * $(this).parent().prev().find('span').text() - 0;
        $(this).parent().next().find('span').html(total);
        // 重新核算总价
        getNumATotal();
      })
      // 减按钮的点击事件
      $('.reduce').click(function () {
        // 将禁用的 + 解除
        $(this).next().next().prop('disabled', false);
        let num = $(this).next().val() - 0;
        num--;
        if (num < 1) {
          num = 1;
          layer.msg('购买数不能少于1');
          $(this).prop('disabled', true);
        }
        $(this).next().val(num);
        // 改变本地购物车的数量
        // 获取商品id，根据对应tr中的属性值 data-id
        let id = $(this).parent().parent()[0].dataset.id;
        let data = JSON.parse(localStorage.getItem('data'));
        let car = data.find(v => v.username === username && v.id === id);
        car.n = num;
        // 将改变后的data数据写入本地购物车
        localStorage.setItem('data', JSON.stringify(data));
        // 修改小结
        let total = num * $(this).parent().prev().find('span').text() - 0;
        $(this).parent().next().find('span').html(total);
        // 重新核算总价
        getNumATotal();
      })
    }
  
    // 绑定数量输入框的失去焦点事件
    function numBlur() {
      $('input[name=number]').blur(function () {
        let num = $(this).val() - 0;
        let stock = $(this).parent().parent()[0].dataset.stock - 0;
        // 对应本地购物车的数量
        // 获取商品id
        let id = $(this).parent().parent()[0].dataset.id;
        let data = JSON.parse(localStorage.getItem('data'));
        let car = data.find(v => v.username === username && v.id === id);
        if (num < 1 || num > stock) {
          layer.msg('购买数量错误');
          $(this).val(car.n);
        } else {
          car.n = num;
          // 将改变后的data数据写入本地购物车
          localStorage.setItem('data', JSON.stringify(data));
          // 修改小结
          let total = num * $(this).parent().prev().find('span').text() - 0;
          $(this).parent().next().find('span').html(total);
        }
        // 重新核算总价
        getNumATotal();
      })
    }
  
  
    // 定义一个移除按钮的点击事件
    function bindRemove() {
      $('.remove').click(function () {
        let index = layer.confirm('你真的要移除吗?', { btn: ['移除', '点错了'] }, () => {
          // 使用箭头函数 让this指向 点击的这个按钮
          // 获取这个商品的id        
          let id = $(this).parent().parent()[0].dataset.id;
          // 将本地购物车的这个数据移除
          let data = JSON.parse(localStorage.getItem('data'));
  
  
          // 获取对应用户的数据,排除掉这个要被移除的数据
          let resData = data.filter(v => !(v.username === username && v.id === id));
          // 排除和用户不相关的购物车数据，判断的到的数据是否为空
          let resdata2 = resData.filter(v => v.username === username);
          // 如果移除后的数组是个空数组，则刷新页面
          if (!resdata2.length) {
            location.reload(); 
          }
          // 将resData写入本地购物车
          localStorage.setItem('data', JSON.stringify(resData));
          // 移除对应的tr
          $(this).parent().parent().remove();
          
          // 关闭弹出层
          layer.close(index);
          // 移除页面中的对应的tr
        }, function () {
          layer.msg('快买吧');
          return false;
        })
        
      })
    }
    
  })